*, 
*:before, 
*:after{
    box-sizing: border-box;
}
html{
    font-size: 16px;
}
body{
    margin: 0;
    padding:0;
    background-color: rgb(255, 164, 208);
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

body > header {
    width: 100%;
    position: fixed;
    background-color: rgb(255, 58, 153);
    height: 4.0rem;
}

.header {
    width: 60.0rem;
    display: flex;
    justify-content: space-between;
    /* background-color: blue; */
    margin: 1.0rem auto 0 auto;
    color: white;
}

main {
    padding-top: 5.0rem;
    width: 60.0rem;
    margin: 0 auto;
    background-color: rgb(255, 150, 206);
}

.portfolio-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.project-card {
    width: 30.0%;
    background-color: gray;
    min-height: 10.0rem;
    margin-bottom: 2.0rem;
    border-radius: 24px;
}

.project-card img {
    width: 100%;
}

.project-1, .project-2, .project-3, .project-4, .project-5, .project-6, .project-7, .project-8, .project-9{
    background-color: rgb(255, 182, 223);
    height: 60.0rem;
}

.textbox{
    border-radius: 24px;
}

.hideAll {
    display: none;
}

.form-container{
    width:960px;
    height:380px;
    border-radius: 24px;
    background-color: rgb(186, 70, 130);
}

h1{
    color: white;
    font-size: 40px;
    font-weight: bolder;
}

.skills-box{
    background-color: rgb(255, 0, 119);
    padding:30px;
}

.aboutme-box{
    background-color: rgb(255, 88, 174);
    padding:30px;
}

.menus span {
    cursor: pointer;
    margin-right: 20px;  
    font-weight: 500;       
    transition: color 0.2s; 
}

.menus span:last-child {
    margin-right: 0; 
}


.menus span:hover {
    color: #0077cc; 
}


.guess{
    width: 177px;
    height: 177px;
    display: flex;
  flex-direction: row;     
  gap: 2.5rem;              
  align-items: center; 
  margin-left:50px;
}

.words{
    display: flex;
  flex-direction: row;      
  gap: 4.5rem;              
  align-items: center; 
  margin-left: 85px;
  font-size: 30px;
}

@media print, screen and (max-width: 40em) {
    /* mobile code */

    .header, main {
        width: 100%;
    }

    .portfolio-container {
        justify-content: center;
        
    }

    .project-card {
        width: 90.0%;
        background-color: rebeccapurple;
    }


}