*{
    font-family: 'Roboto Mono', monospace;
}
body{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.width-content{
    width: 60em;
}
header, .firstcontent, .secondcontent, .thirdcontent{
    display: flex;
    justify-content: center;
}
a{
    text-decoration: none;
    color: #b5b5b6;
    font-size: medium;
    transition: 1s;
    border-radius: 5px;
    padding: 3px 5px 3px 5px;
} 
a:hover{
    transition: 1s;
    text-decoration: underline;
    color: hotpink;
    background-color: #283547;
    bottom: 1px;
    right: 1px;
    box-shadow: 3px 2px 8px black;
    border-radius: 5px;
    padding: 3px 5px 3px 5px;
}
button:hover{
    position: relative;
    bottom: 1px;
    right: 1px;
    box-shadow: 3px 2px 8px black;
}
/* HEADER NAVIGATION-------------------*/

header{
    background-color: #1F2937;
    color: white;
    padding: 5px 0 109px 0;
}
.nav-spread, .header-content{
    display: flex;
    align-items: center;
    justify-content: center;
}

/*nav------------------------------*/

.logo{
    padding: 5px;
    font-size: 24px;
    font-weight: bold;
    color: #F9FAF8;
    transition: 300ms;
    padding: 10px;
    border-radius: 10px;
}
.logo:hover{
    color: hotpink;
    transition: 240ms;
    background-color: #283547;
    border-radius: 10px;
    position: relative;
    bottom: 1px;
    right: 1px;
    box-shadow: 3px 2px 8px black;
}
li{
    list-style: none;
    width: fit-content;
}
.list-flex{
    display: flex;
    gap: 15px;
}
.nav-spread{
    justify-content: space-between;
    margin-bottom: 50px;
}

/*header content----------------------*/

.header-content{
    gap: 50px;
    padding: 45px 0 45px 0;
}
.hcontent-left{
    width: 270px;
    flex-grow:1;
}
.hcontent-left h1{
    margin: 0;
    padding: 0;
    font-size: 38px;
    font-weight:bolder;
    color: #F9FAF8;
}
.hcontent-left p{
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 14px;
    color: #E5E7EB;
}
.hcontent-left button{
    border: none;
    border-radius: 10px;
    padding: 10px 27px 10px 27px;
    background-color: #3B82F6;
    font-size: medium;
    color: white;
}
.hcontent-right{
    border: 1px solid black;
    background-color: #b1b2b3a9;
    color: #dbdddf;
    height: 220px;
    margin: 0px;
    flex-grow:1;
    text-align: center;
    line-height: 220px;
}

/*BODY CONTENT--------------------*/

.content{
    padding: 0;
}

/*FIRST CONTENT---------------------*/
.title-mcontent{
    font-size: 36px;
    font-weight: bolder;
    text-align: center;
    padding-bottom: 25px;
}
.firstcontent{
    padding: 50px 0 50px 0;
}
.box-container{
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    width: 150px;
}
.box-flex{
    gap: 100px;
    display: flex;
    justify-content: center;
}
.box{
    background-color: transparent;
    border: 3px solid #3882F6;
    border-radius: 5px;
    width: 150px;
    height: 150px;
}

/*Second content----------------------------*/

.secondcontent{
    background-color: #E5E7EB;
    padding: 50px 0 50px 0;
}
.Quote-text{
    font-family: monospace;
    font-size: 30px;
    font-weight: lighter;
    font-style: italic;
    color: #1F2937;
}
#quoteme{
    font-family: monospace;
    font-size:larger;
    font-weight: 1000;
    position: relative;
    left: 590px;
}

/*Third Content----------------------------*/

.thirdcontent{
    padding: 70px 0 70px 0;
}
.boxwrap{
    display: flex;
    background-color: #3B82F6;
    border-radius: 10px;
    padding: 0 25px 0 25px;
}
.boxwrap div{
    color: white;
    margin:10px 50px 10px 50px;
    justify-content: center;
    align-items: center;
}
.tcontent-left{
    font-size: medium;
    flex-grow:1;
}
.tcontent-right{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 2;
}
.tcontent-right button{
    color: white;
    border-radius: 5px;
    border: 1px solid whitesmoke;
    background-color: #3882F6;
    padding: 5px 17px 5px 17px;
}

/*Footer--------------------*/

footer{
    color: white;
    background-color: #1F2937;
    padding: 0 50px 0 55px;
    text-align: center;
}