/* Editors notes
two conflicting css files might be an issue
but we're going to let the me who doesn't have physics hw deal with that😎
*/
/* This is for the navigation bar. Makes it look the same across all pages */
*{
    margin: 0;
    padding: 0;
}
body{
    background: #ffffff;
    font-family:'Calibri', 'Lucida Grande', sans-serif;

 p{
    text-align:center;
 }
.container{
    width: 100%;
    margin: 5% auto;
}
.contact-box{
    color: white;
    background: #002444;
    display: flex;
}

.contact-left{
   flex-basis: 60%;
   padding: 4% 6%; 
}

.contact-left h3{ /* "send your request" needs sum space under it*/
    margin-bottom: 2%;
 }

/*.contact-right{
    
    flex-basis: 10%;
    width:100%;
    padding: 4%;
    background: rgb(237, 181, 75);
    color:black;
}
/*Adjusts font size based on screen size*/
@media screen and (max-width: 950px) {
    .contact-box{
        height:150%;

    }
    .container{
        height:150%;
    }
    .td{
        font-size: 100%;
        height: 50%;
        padding-top: 2%;
    }
  }

  h1{

    text-align: center;
    margin-left: 25%;
    margin-right:25%;
    font-size: 2rem;
    color: rgb(0, 0, 0);
  }

h3{ 
    font-size: 100%;
    margin-bottom: 1.5%;

}

.container p{
    margin-bottom: 4%;
    color: white;
}

.input-row{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
}

.input-row .input-group{
    flex-basis: 45%;
}

input[type="text"]{
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding-bottom: 5px;
}

/* input[type="message"]{
    width: 100%;
    border: 1px solid #ccc;
    outline: none;
    padding: 18px;
    lowk did not pan out but im keeping this as a teaching moment (also im proud)
} */

textarea {
    width: 100%;
    height: 4%;
    overflow-y: scroll; /* Enable vertical scrolling */
    resize: none; /* Prevent user from resizing */
    padding: 2.5%;
    margin: 0px;
}

label{
    font-size: 80%;
    margin-bottom: 0.6%;
    display: block;
}



tr td:first-child{
    padding-right: 2%;
}

tr td{
    font-size: 1.5vw;
    padding-top: 2%;
    height: 50%;
}

.button{
    display: inline-block;
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    background-color: rgb(243, 171, 54);
    padding: 1px 32px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 15px;
    
}


section{
    text-align:center;
    margin-left: 25%;
    margin-right:25%;
    float:center;
}
.mediabutton
{
    color: white;
    font-size: 1.7rem;
    text-decoration: none;
    background-color: rgb(243, 171, 54);
    padding: 1px 32px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 15px;
    height: 8%;

    
}
@media screen and (max-width: 950px) {
  .boxlogo{
    display:none;
  }
}

.boxlogo
{
    margin-top:15%;
    margin-left:20%;
    float: center;
}
footer{
    float: center;
    text-align: center;
    margin-right: 25%;
    padding-bottom: 50%;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
    border-right:1px solid #bbb;
  }
  
  li:last-child {
    border-right: none;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    background-color: #70aec8;
  }
  
          @media screen and (max-width: 880px) {
            .header2{
              display:none;
            }
             
          
            }
            @media screen and (min-width: 880px) {
              header{
                display:none;
              }
               
            
              }
}