/* two lined focus indicator provides accessibility no matter what browser settings users have z*/
*:focus {
	outline: 2px #ffffff solid;
	outline-offset: 0;
	box-shadow: 0 0 0 4px #000000;
} 


@font-face {
    font-family: Mazius;
    src: url('./Assets/Fonts/MaziusDisplay-Regular.woff')  format('truetype');
  }

  @font-face {
    font-family: Mazius;
    src: url('./Assets/Fonts/MaziusDisplay-Bold.woff')  format('truetype');
    font-weight: bold;
  }

@font-face{
    font-family: opendyslexic;
    src: url('./Assets/Fonts/OpenDyslexic-Regular.otf')
}
@font-face{
    font-family: opendyslexic;
    src: url('./Assets/Fonts/OpenDyslexic-Bold.otf');
    font-weight: bold;
}

div.search{
    background-color: #B67A8D;
    word-wrap: break-word;
    padding: 70px;
    font-size: 3vw;
}

.fontSection{
    background-color: #B67A8D;
    padding: 50px;

}

nav{
    background-color: #B67A8D;
    font-size: 3.5vw;
}

nav ul {
    list-style: none;
    padding:0;
}

ul.nav-list{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

html{
    background-color: #d5e9ff;
    font-family: Mazius;
}               

a{
    color: white;
}

fieldset{
    margin: 10px;
    box-sizing: border-box;
}

button{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    font-family: Mazius;
    font-size: 3vw;

}
input.brand{
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: 3vw;
    
}

h1{
    text-align: center;
    font-size: 5vw;
}


hr{
    box-sizing: border-box;
    background-color: #000000;
    border: none;
    height: 5px;
}

.skip-link {
    opacity:0
  }
  
  .skip-link:focus {
    background-color: #B67A8D;
    transform: translateY(0%);
    opacity: 1;
  }


/*Reactive Design*/
@media (max-width: 600px) {

    nav{
        font-size: 20px;
    }
    .nav-list{
        display: flex;
        flex-direction: column;
        align-items: center;
    }    

    div.search{
        padding: 50px;
        font-size: 15px;
    }

    button{
        font-size: 15px;
    }

    h1
    {
        font-size:25px;
    }

    input.brand{
        font-size: 15px;
    }


}

@media (max-width:400px) {
    .nav-list{
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }


    div.search{
        padding: 25px;
        font-size: 15px;

    }
    
    input.brand{
        font-size: 15px;
    }
  
}