@charset "utf-8";

*{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

@media (orientation: landscape) {
    main {
        display: grid;
        grid-template-columns: minmax(20px, 2fr) minmax(30px, 3fr);
        grid-template-rows: auto auto;
        gap: 20px;
    }
    
    figure{
        display: grid;
        grid-template-columns: minmax(8px, 1fr) minmax(30px, 10fr);
        grid-template-rows: auto auto;
    }
          .margin {
            grid-column: 1;
            grid-row: 1 / 2;
          }
        
          .landscape{
            grid-column: 2;
            grid-row: 1 / 2;
          }
        
          .date{
            grid-column: 1;
            grid-row: 2;
          }
        
          .title {
            grid-column: 2;
            grid-row: 2;
          }
        
    }

@media (orientation: portrait) {
    main {
        display: flex;
        flex-direction: column; 
    }
}

body {
    background-color: #ffebc6e8;
    font-size: 16px;
    margin-top: 20px;
}
a{
    text-decoration: none;
    color: rgb(153, 90, 211);
}
h1{
   font-weight: lighter;
   font-size: 24px;
   margin: 20px;
}
#me{
    width: 100%;
    max-width: 50px;
}
.name{
   font-weight: lighter;
   color: rgb(148, 87, 205);
   text-decoration: none; 
   font-size: 24px;
   margin: 20px;
}
.bio{
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}
img, video {
    width: 100%;
    height: auto;
    
}
.date{
    color: red;
    font-size: 15px;
    
}
.title{
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 20px;
}
p{
    margin-bottom: 20px;
}
figure{
    margin-bottom: 20px;
}