@font-face {
    font-family: "ClassicRobot";
    src: url("Classic Robot.ttf") format("truetype");
}

body {
    margin: 0;
    font-family: sans-serif;
    font-family: "ClassicRobot", sans-serif;
}

h1, h2, h3 {
    font-family: "ClassicRobot", sans-serif;
    letter-spacing: 1px;
    font-weight: normal;
    margin: 0%;
}

h2 {
    font-size: 250%;
}

p {
    color: #91F5FF;
    margin-top: 0%;
    padding-top: 0%;
}



.hero {
    min-height: 100vh;
    background-image: url("bg.jpg");
    background-size: cover;
    background-position: center;
    padding: 40px;
}

.logo {
    width: 500px;
    margin-bottom: 20px;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
}

.card {
    background: rgba(0, 0, 0, 0.35);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    color: white;
}

.projects {
    text-align: center;
    color: white;
}

.project {
    display: flex;
    background: rgba(0, 0, 0, 0.35);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    color: white;
}

.thumb {
    width: 120px;
    height: 120px;
    background: #ddd;
    margin-right: 20px;
}

.info button,
.card button {
    background: #39ff14;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    width: 100px;
    font-family: "ClassicRobot";
    border-radius: 2px;

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.32, rgb(34, 146, 34)),
        color-stop(0.7, rgb(74, 255, 104)),
        color-stop(0.85, rgb(137, 255, 129))
    );
}

input, textarea {
    width: 100%;
    margin-top: 0px;
    padding: 8px;
    border: none;
    margin-bottom: 5px;
    font-family: "Arial";
}