diff --git a/styles.css b/styles.css deleted file mode 100644 index fc2db6c..0000000 --- a/styles.css +++ /dev/null @@ -1,234 +0,0 @@ -body { - margin: 0; - font-family: Arial, sans-serif; - background: grey; - color: #333; - min-height: 100vh; -} - -@keyframes fade-out { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -body { - animation: fade-in 0.6s ease-in; -} - -.glass-button:active { - animation: fade-out 0.6s ease-out; -} - -.back-button { - position: absolute; - top: 20px; - left: 20px; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); - border-radius: 30px; - padding: 10px 20px; - color: #333; - text-decoration: none; - font-size: 1.2em; - transition: transform 0.3s ease, background 0.3s ease; - z-index: 1000; -} - -.back-button:hover { - background: rgba(255, 255, 255, 1); -} - -.back-button:active { - transform: scale(0.95); -} - -.home-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - height: 100vh; -} - -.home-container h1 { - font-size: 3em; - margin-bottom: 10px; - color: #fff; -} - -.home-container p { - font-size: 1.2em; - color: #fff; - margin-bottom: 20px; -} - -.home-button-container { - display: flex; - gap: 15px; -} - -.glass-button { - padding: 15px 30px; - background: rgba(255, 255, 255, 0.8); - border-radius: 30px; - color: #333; - text-decoration: none; - font-size: 1.2em; - transition: transform 0.3s ease, background 0.3s ease; -} - -.glass-button:hover { - background: rgba(255, 255, 255, 1); -} - -.glass-button:active { - transform: scale(0.95); -} - -.page-title { - font-size: 3em; - text-align: center; - margin: 20px 0; - color: #fff; -} - -.content-container { - display: flex; - padding-top: 80px; -} - -.contents { - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); - padding: 20px; - border-radius: 0 10px 10px 0; - width: 20%; - max-height: auto; - overflow-y: auto; - position: sticky; - top: 0; - box-sizing: border-box; - color: #333; -} - -.contents ul { - list-style: none; - padding: 0; -} - -.contents li { - margin-bottom: 10px; -} - -.contents a { - color: #333; - text-decoration: none; - font-size: 1.1em; - transition: opacity 0.3s ease-in-out; -} - -.contents a:active { - opacity: 0; -} - -.steps { - flex: 1; - display: flex; - flex-direction: column; - gap: 10px; - padding: 0 20px; - box-sizing: border-box; -} - -.step-box { - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); - border-radius: 10px; - padding: 20px; - width: 100%; - box-sizing: border-box; - color: #333; - min-height: 15cm; -} - -.step-box h3 { - font-size: 1.5em; -} - -.steps .step-box { - margin-bottom: 20px; -} - -.guide-title { - position: absolute; - top: -5px; - left: 50%; - transform: translateX(-50%); - font-size: 3em; - color: #fff; - text-align: center; - width: 100%; - padding: 20px 0; - box-sizing: border-box; - z-index: 999; -} - -.credits-container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - height: 100vh; - text-align: center; -} - -.credits-title { - font-size: 3em; - margin-bottom: 20px; - color: #fff; -} - -.developers { - display: flex; - gap: 40px; -} - -.developer-profile { - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); - border-radius: 15px; - padding: 20px; - text-align: center; - color: #333; - width: 200px; -} - -.developer-profile img { - width: 100px; - height: 100px; - border-radius: 50%; - margin-bottom: 10px; -} - -.developer-profile h4 { - margin: 10px 0; - font-size: 1.5em; -} - -.developer-profile p { - font-size: 1.1em; -}