@font-face {
    font-family: robotcrush;
    src: url(../fonts/RobotCrush.ttf);
}

/**/
* { 
    margin: 0;
    padding: 0;
}
/**/

body {
    background: url(../images/background_circuits.png);
}

#wrapper {
    border: 3px solid #273830; 
    width: 1024px;
    margin: 40px auto;
    border-radius: 20px;
    background: #FDFDFE;
}
h1 {
    font-family: robotcrush;
    font-size: 3em;
}

#contact {
    width: 200px;
    height: 14px;
    border: solid #273830 3px;
    padding: 12px;
    background: #98B755;
    position: fixed;
    bottom: 0px;
    right: 20px;
    transition: height .85s ease-in; 
}


#contact:hover {
    transition: height .85s ease-in;
    height: 200px;
}
/* animated transition to show form */



#contact form { 
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.stretch {
    grid-column: 1 / 3; 
}



main {
    display: grid;
    grid-template-columns: 437px 437px; /**/
    gap: 50px; /**/
    margin: 50px; /**/
}

section {
    width: 437px; /* 437 */
    height: 437px; /* 437 */
    border: 12px solid #273830;
    box-sizing: border-box;
    padding: 8px;
    justify-self: center;
    background: linear-gradient(to bottom,#F0F0F0 ,#D4EED1 ); /**/
}


section img {
    max-width: 100%;
    height: auto;
}
/* responsive image */


header h1 {
   align-self: center;
   justify-self: center;
}

header {
    height: 200px;
    display: grid;
    grid-template-columns: 1fr 4fr;
}

nav {  
    
    background: #98B755;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5em;
    
}  

nav ul { 
    display: grid; 
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: 50px;
    justify-content: space-evenly; 
    list-style-type: none; 
    margin: 0;
    padding: 0;
} 

nav li { 
    align-content: center;
}

nav a {
    
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    padding: 9px 67px;
}

nav a:hover {
    color:#273830;
    text-shadow: 2.5px 2.5px #FDFDFE;
    background: #F7eebe;
}


footer {
    clear: both;
    text-align: center;
}
 
table.greenTable {
  border: 6px solid #24943A;
  background-color: #D4EED1;
  text-align: center;
}
table.greenTable td, table.greenTable th {
  border: 1px solid #24943A;
  padding: 3px 2px;
}
table.greenTable thead {
  background: #24943A;
  background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
  background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
  background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
  border-bottom: 0px solid #444444;
}
table.greenTable thead th {
  font-size: 19px;
  font-weight: bold;
  color: #F0F0F0;
  text-align: left;
  border-left: 2px solid #24943A;
}
table.greenTable thead th:first-child {
  border-left: none;
}

table.greenTable tfoot td {
  font-size: 13px;
}
table.greenTable tfoot .links {
  text-align: right;
}
table.greenTable tfoot .links a{
  display: inline-block;
  background: #FFFFFF;
  color: #24943A;
  padding: 2px 8px;
  border-radius: 5px;
}


@media (max-width:1024px) { 
    #wrapper{
        width: 100%;
        margin: unset;
    }
    main{
        grid-template-columns: 1fr 1fr;
    }
    main section {
        width: 100%;
        height: 100%;
    }
   
}

@media (max-width: 745px) {
    
    header {
        display: block;
        text-align: center;
        height: unset;
    }
    header img {
        display: none;
    }
    nav ul{
        display: block;
        text-align: center;
    }
    nav a{
        padding: 0 30%;
    }
    main {
        display: block;
    }
     #contact {
        position:unset;
        width: 80%;
        margin: auto;
        height: 200px;
    }
    section {
        text-align: center;
    }
    
}

/* Responsive screen sizes */