body{
    background: #C0C0C0;
}
main {
   /*height: 100vh;*/ height: auto;/*Change the height to auto so that it fits the screen*/
   width: 50%;
   margin: 0 auto; 
   display: flex;
   flex-wrap: wrap;/*So that they fit like frogs in lines depending on the space*/
}
h1{
    font-size: 3rem;
    font-family: "Playwrite AU NSW", cursive;
     font-optical-sizing: auto;
     font-style: normal;
    margin: 0;
    padding: 0px 5px;
    color: #4C0A57;
    margin-bottom: 0;
}

h2 {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.9rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: black;
      margin-top: 10px;
      margin-bottom: 0px;

    }

h2:first-of-type{
    padding: 0px;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0%;
}

.left-column {
    background-color: #FCCFDC;
    width: 37%;
    display: flex;
    flex-direction: column;
    gap: 0px; 
    padding: 10px;
    box-sizing: border-box;
}


.right-column {
    background-color: #F9F9F9;
    width: 50%;
    box-sizing: border-box;
}

img {
    width: 140px;
    height: auto;
}

p {
    font-size: 9px; 
    color: #333;
    text-align: justify;
}

.photo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.photo img {
    display: block;              
    border: 5px solid white;    
    padding: 8px;               
    background-color: #f8d7da;   
    box-sizing: border-box;      
}
.contacts img{
    width: 12px;
}
.contacts ul {
    list-style: none; 
    padding-left: 30px; 
}
.contacts li {
    display: flex; 
    align-items: center;
    gap: 8px; 
}


main ul li {
    font-size: 10px;
    line-height: 1.5;    
    list-style-position: inside; 
    padding: 2px 0; 
}

.left-column section {
    padding: 8px; 
    margin-bottom: 0px; 
    box-sizing: border-box;
    margin: 0px;
    padding: 0px 10px;
}
.right-column section {
    
    margin: 0px;
    padding: 0px 30px;
}
.left-column h3 {
    background-color: white; 
    padding: 4px 20px;
    margin-bottom: 0px; 
    font-size: 14px;
}
.right-column h3{
    background-color: #FCCFDC; 
    padding: 4px 20px;
    margin-bottom: 0px; 
    font-size: 14px;
}
h4{
     padding: 0px 25px;
     margin: 8px;
     font-size: 13px;
}
h5{
    padding: 0px 25px;
    margin: 6px;
    font-size: 10px;
}
.formation p{

    padding: 0px 35px;
    margin: 6px;
}
.hobbies ul {
    columns: 2;        
    column-gap: 20px;  
    
    margin: 5px;
}

hr {
    border: none;              
    height: 4px;            
    background-color: #FCCFDC; 
    margin: 0px 0;            
}

/*One media query for Laptop,¡Pad,Phone*/
@media (max-width: 1024px)and (min-width: 769px) {
    main{
        width: 80%;
    }
}

@media (max-width: 768px) and (min-width: 481px){
    main{
        width: 90%;
        flex-direction: column;
    }
    .left-column, .right-column{
        width: 100%;
    }
    .photo img {
        width: 120px; 
    }
    
  
}

@media (max-width: 480px) and (min-width: 320px) {
    main{
        width: 95%;
        flex-direction: column;
    }
    .left-column, .right-column{
        width: 100%;
    }
    .hobbies ul {
        columns: 1;
    }
    h1 {
        font-size: 2rem;
    }
    
}