@font-face{
    font-family: '000webfont';
    src: url(000webfont.ttf)
}
@font-face{
    font-family: 'basiic';
    src: url(basiic.ttf)
}

header , nav , main , footer , .blinkies {
    border: #37cbdeff 2px solid;
    background-color: #000000b1;
    color: aliceblue;
}
body {
    background-image: url(images/887feca66d6a8c56131bbf5387ef6a18.jpg)
}
.box {
    max-width: 750px;
    margin: 40px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 150px minmax(0, 1fr);
    word-wrap: break-word;
    font-family: 'basiic'
}
header {
    grid-row: 1 / 2 ;
    grid-column: 1 / 4 ;   
    padding: 10px;
    display: flex;
    justify-content: center;
    
    
}
.blinkies {
    grid-row: 2 / 3 ;
    grid-column: 1 / 2 ;   
    height: max-content;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
main {
    grid-row: 2 / 3 ;
    grid-column: 2 / 3 ;   
    height: max-content;
    padding: 10px;
    
}
footer {
    grid-row: 3 / 4 ;
    grid-column: 1 / 4 ;   
    text-align: center;
}
.me {
    width: 100%;
    float: left;
}
#bla {
    margin-left: auto;
    margin-right: auto;
}
a:link {
    color:crimson;
}
a:hover {
    color: red;
}
a:visited {
    color: deeppink;
}
nav {
    grid-row: 2 / 3 ;
    grid-column: 3 / 4 ; 
    height: max-content;
    width: 60px;
    padding: 10px;
    
}
.yup {
    float: right;
    width: 60px;
    padding-bottom: 5px
    
}
#fih{
    width: 25%;
    position: absolute;
}
.row{
    display: flex;
}
.columnl{
    width: 30%;
}
.columnr{
    width: 70%
}
.button{
    height: 31px;
    width: 88px;
    margin-left: auto;
    margin-right: auto;
}
.container{
    grid-row: 2/3;
    grid-column: 1/4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px
}
.textbox{
    text-align: center;
}